<template>
    <div class="wrap" :class="{'overflow':overflow}">
      <!-- <Header :navTitle="title" :showBack="showBack"></Header> -->
      <!--index.wxml-->
      <form :style="{height:areaHeight}">
          <div class='reword-wrap column'>
              <div class='stage-item column' v-for="(item,index) in chatList" :key="index" :id="item.mid">
                  <div class='reword-item column' v-if="item.type == 'xiaohe'">
                      <p class='time flex'>{{item.creatTime}}</p>
                      <div class='doctor item flex'>
                          <div class='item-left column'>
                              <img :src='item.avaral'></img>
                              <p>{{item.name}}</p>
                          </div>
                          <div class='item-right'>
                              <!-- 文字样式 -->
                              <div class='p-wrap'>
                                  <p class='p'>{{item.txt}}</p>
                              </div>
                          </div>
                      </div>
                  </div>
                  <!-- 输入框 -->
                  <div class='reword-item column' v-if="item.type == 'me' && item.txt == 'input'">
                      <div class='me item flex'>
                          <div class='item-right number flex'>
                              <input :type="item.textType" cursor-spacing="10" maxlength='5' v-model="item.name" :disabled='item.disabled'></input>
                              <div class='send flex' @click="sendTap(index)" v-if="!item.disabled" >发送</div>
                          </div>
                      </div>
                  </div>

                  <!-- 下拉选择框 -->
                  <div class='reword-item column' v-if="item.type == 'me' && item.txt == 'picker'">
                      <div class='me item'>
                          <div class='item-right' @click="openPicker(item.disabled)">
                            <div class='age-wrap flex'>
                                <p class='age'>{{item.name}}</p>
                                <img src='../assets/arrow-down.png'></img>
                            </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <div class='pay-for-btn flex' v-if="showBtn" @click="enterTap">快进您的线上医院吧</div>
          <div class='skip-btn flex' @click="enterTap">跳过</div>
      </form>
      <!--出生日期 picker -->
      <mt-datetime-picker
        ref="picker"
        type="date"
        :startDate="startDate"
        :endDate="today"
        @confirm="handleConfirm" v-if="startDate">
      </mt-datetime-picker>
    </div>
</template>

<script>
import Header from "./header";
import utils from "../base/js/util.js";
import avaral from "../assets/xiaohe.png";
import { DatetimePicker,Toast } from "mint-ui";
import { updateuserinfo } from "./../api/index";
export default {
  data() {
    return {
      title: "与小禾对话中",
      showBack: false,
      areaHeight: 800,
      areaHeight: null, //聊天区域的高度
      chatList: [],
      truename: "", //用户真实姓名
      toView: "", //scroll-view跳动到的地方
      showBtn: false,
      today: "2018-10-12", //今天的日期
      outTime: 1000,
      birthday: "",
      name: "",
      startDate:'',
      overflow:false
    };
  },
  components: {
    Header
  },
  mounted() {
    //获取聊天区域的高度
    let screenHeight = window.innerHeight;
    let screenWidth = window.innerWidth;
    this.areaHeight = screenHeight -  100 +'px';
    this.startDate = new Date(1900, 1, 1);
    let time = new Date().getTime();
    let date = new Date();
    this.today = date;
    date = utils.formatTime(date);
    //助手小禾推送问题
    this.chatList.push({
      type: "xiaohe",
      txt: "嗨! 您好！我是诊禾医馆小助手—小禾。",
      name: "小禾",
      creatTime: date,
      time: time,
      avaral: avaral,
      mid:'me1'
    });
    setTimeout(() => {
      this.chatList.push(
        {
          type: "xiaohe",
          txt: "先来告诉我一下您的名字吧。",
          name: "小禾",
          creatTime: date,
          time: time,
          avaral: avaral,
          mid:'me2'
        },
        {
          type: "me",
          txt: "input",
          textType:'text',
          name: "",
          creatTime: date,
          avaral: "",
          disabled: false,
          time: time,
          mid:'me3'
        }
      );
    }, this.outTime);
  },
  methods: {
    //弹出出生日期picker
    openPicker(disabled) {
      if(!disabled){  
        this.$refs.picker.open();
        this.overflow = true 
      }
    },
    //选择日期
    handleConfirm(value) {
      let mstr = sessionStorage.getItem('mstr')
      let time = new Date().getTime();
      let date = new Date()
      date = utils.formatTime(date)
      this.chatList[4].name = utils.formatTime1(value);
      this.overflow = false 
      let options={
          mstr,
          age:this.chatList[4].name
      }
      updateuserinfo(options).then((res)=>{
          if(res.data.status === 1){
            localStorage.setItem('myBrith',this.chatList[4].name)
            this.chatList[4].disabled = true
            this.chatList.push({
                type: 'xiaohe',
                txt: "您手机号码多少？方便以后医生联系您，了解病情。",
                name: '小禾',
                creatTime: date,
                avaral: avaral,
                time: time,
                mid:'me6'
            }, {
                type: 'me',
                txt: "input",
                textType:'number',
                name: '',
                creatTime: date,
                avaral: '',
                time: time,
                disabled: false,
                mid:'me7'
            })
            //跳转到最新的那条记录
            this.$nextTick(() => {
                let container = this.$el.querySelector("#"+ this.chatList[this.chatList.length-1].mid);
                container.scrollIntoView()
            })
          }else{
            Toast({
              message: res.data.info,
              position: 'center',
              duration: 2000
            });
          }
      })
    },
    //发送姓名
    sendTap(index,mid) {
      let mstr = sessionStorage.getItem('mstr')
      let time = new Date().getTime();
      let date = new Date()
      date = utils.formatTime(date)
      if(index == 2){
        if (!this.chatList[2].name.replace(/(^\s*)|(\s*$)/g, "")) {
          Toast({
            message: '请输入姓名',
            position: 'center',
            duration: 2000
          });
          return false;
        }
        let options={
              mstr,
              truename:this.chatList[2].name,
              usernametype:1
        }
        updateuserinfo(options).then((res)=>{
          if(res.data.status === 1){
            this.chatList[2].disabled = true
            localStorage.setItem('myName',this.chatList[2].name)
            this.chatList.push({
                type: 'xiaohe',
                txt: "您的出生日期是？",
                name: '小禾',
                creatTime: date,
                avaral: avaral,
                time: time,
                mid:'me4'
            }, {
                type: 'me',
                txt: "picker",
                name: '',
                creatTime: date,
                avaral: '',
                time: time,
                disabled: false,
                mid:'me5'
            })
            //跳转到最新的那条记录
            this.$nextTick(() => {
                let container = this.$el.querySelector("#"+ this.chatList[this.chatList.length-1].mid);
                container.scrollIntoView()
            })
          }else{
            Toast({
              message: res.data.info,
              position: 'center',
              duration: 2000
            });
          }
        })
      }else if(index == 6){
        if (!this.isTel(this.chatList[6].name)) {
          Toast({
            message: '请输入有效手机号码',
            position: 'center',
            duration: 2000
          });
          return false;
        }
        let options={
            mstr,
            phone:this.chatList[6].name
        }
        updateuserinfo(options).then((res)=>{
          if(res.data.status === 1){
            localStorage.setItem('myPhone',this.chatList[6].name)
            this.chatList[6].disabled = true
            this.showBtn=true
          }else{
            Toast({
              message: res.data.info,
              position: 'center',
              duration: 2000
            });
          }
        })
      }
    },
    // 进入首页
    enterTap(e) {
      this.$router.push({//你需要接受路由的参数再跳转
        name: 'ask'
      });
    },
    //验证手机号
    isTel(mobile) {
        return (/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(mobile));
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../base/css/_base.scss";
/**index.wxss**/
.wrap{
  position: relative;
  height: 100vh;
}
form {
  padding-top: torem(40px);
  overflow: scroll;
  
}
.overflow{
  overflow: hidden;
  height: 100vh;
}
.reword-wrap {
  background: #ebe7e1;
  padding: torem(32px);
}

.stage-item .reword-item {
  margin-bottom: torem(28px);
}

.stage-item .reword-item .time {
  color: #9a9183;
  font-size: torem(22px);
  margin-bottom: torem(13px);
  justify-content: center;
}

.item .item-left {
  align-items: center;
  color: #333;
  font-size: torem(28px);
  margin-right: torem(32px);
}

.item .item-left img {
  width: torem(96px);
  height: torem(96px);
  border-radius: 50%;
  margin-bottom: torem(12px);
}

.item .item-right {
  display: block;
}
.item .item-right.number {
  display: flex;
  justify-content: space-between;
}
.item .item-right.number input {
  width: torem(200px);
  font-size: torem(28px);
}
.item .item-right.number .send {
  width: torem(90px);
  background: #db5033;
  color: #fff;
  font-size: torem(24px);
  align-items: center;
  justify-content: center;
  border-radius: torem(10px);
  margin-left: torem(20px);
}

/* 文字样式 */

.item .item-right .p {
  max-width: torem(446px);
  background-color: #fff;
  border: solid 1px #d6d0c7;
  align-items: center;
  color: #333;
  font-size: torem(28px);
  padding: torem(15px) torem(20px);
  border-radius: torem(10px);
  position: relative;
  word-break: break-all;
}
.item .item-right .p::before {
  content: "";
  position: absolute;
  right: 100%;
  top: torem(26px);
  width: 0;
  height: 0;
  border-top: torem(12px) solid transparent;
  border-right: torem(12px) solid #fff;
  border-bottom: torem(12px) solid transparent;
}
.me .item-right {
  width: torem(480px);
  background-color: #ffffff;
  border-radius: torem(8px);
  border: solid 1px #d6d0c7;
  padding: torem(25px) torem(20px);
  margin-left: torem(120px);
}
.me .item-right input {
  flex: 1;
  height: torem(70px);
  padding: 0 torem(20px);
  border-radius: torem(8px);
  border: solid 1px #d6d0c7;
  font-size: torem(28px);
}
.me .item-right .age-wrap,
.item-right .radio-wrap {
  width: 100%;
  height: torem(70px);
  padding: 0 torem(20px);
  border-radius: torem(8px);
  border: solid 1px #d6d0c7;
  align-items: center;
  justify-content: space-between;
}
.item-right .age-wrap .age {
  flex: 1;
  height: 100%;
  font-size: torem(28px);
  color: #333333;
  display: flex;
  align-items: center;
}
.item-right .age-wrap img {
  width: torem(31px);
  height: torem(17px);
}
.item-right .radio-wrap .radio-item {
  width: torem(110px);
  height: torem(40px);
  background-color: #fff;
  border-radius: torem(4px);
  color: #666666;
  font-size: torem(26px);
  align-items: center;
  justify-content: center;
  border: solid 1px #7f7f7f;
}
.item-right .radio-wrap .radio-item.active {
  background: #db5033;
  color: #fff;
  border-color: #db5033;
}

.item-right .item-right {
  width: torem(200px);
  height: torem(200px);
  border-radius: torem(10px);
}
.picker {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  height: torem(300px);
}
/* 快进您的线上医院吧按钮 */

.pay-for-btn {
  width: torem(302px);
  height: torem(82px);
  background-color: #db5033;
  border-radius: torem(8px);
  color: #fff;
  font-size: torem(22px);
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: torem(50px);
  left: 50%;
  transform: translateX(-50%);
}
.skip-btn {
  width: torem(83px);
  height: torem(50px);
  border-radius: 6px;
  border: solid 1px #db5033;
  color: #db5033;
  font-size: torem(26px);
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: torem(80px);
  right: torem(30px);
}
.tips {
  font-size: torem(26px);
  color: #999;
}
</style>
